<template>
  <view class="list-page">
    <template v-for="item in page.list" :key="item.id">
      <userMessageCard type="comment" :data="item"></userMessageCard>
    </template>
    <view class="hint">
      <text class="text" v-if="page.more && page.isLoading">正在加载...</text>
      <text class="text" v-if="!page.more">没有更多了</text>
    </view>
  </view>
</template>

<script setup>
/* eslint-disable */
import userMessageCard from '@/components/message/userMessageCard'
import { onReachBottom } from '@dcloudio/uni-app'
import { reactive, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties

const { $data: page, $fn: pageFn } = (() => {
  const $data = reactive({
    isLoading: true,
    query:{
      page: 0,
      pageSize: 10
    },
    more: true,
    total: 0,
    list: [],
  })
  const $fn = {
    getList(init){
      if($data.more)
      $data.isLoading = true
      if (init) {
        $data.list = []
        $data.query.page = 1
      } else {
        $data.query.page++
      }
      $https({
        url: '/video-comment/messageCenter/list',
        type: '',
        method: 'get',
        data: {
          ...$data.query
        }
      }).then(res => {
        if (res.code === 0) {
          $data.list.push(...res.data.items)
          $data.more = res.data.pagination?.more || false
          $data.total = res.data.pagination?.total_record || 0
          console.log('list:', $data.list)
        }
        $data.isLoading = false
      })
    }
  }
  $fn.getList()
  return {
    $data,
    $fn
  }
})()
onReachBottom(()=>{
  if(!page.isLoading && page.more) {
    pageFn.getList()
  }
})
</script>

<style scoped lang="scss">
.list-page{
  padding: 24rpx;
  .hint{
    padding: 48rpx;
    color: #999999;
    font-size: 24rpx;
    text-align: center;
  }
}
</style>